<script setup lang="ts">
import { request } from '@/apis'
import { closeToast, showLoadingToast, showToast } from 'vant'
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const loading = ref(false)
//路由
const route = useRoute()
const router = useRouter()
//获取地址
const areaList = ref<AreaColumns>({} as AreaColumns)
const AdressInfo = ref<AddressItem>({} as AddressItem)
onMounted(async () => {
  const res = await mk.getAreaColumns()
  // console.log(res)
  areaList.value = res //获取省市区地址
  if (route.params.id) {
    showLoadingToast({ message: '加载中...', duration: 0, forbidClick: true })
    document.title = '编辑地址'
    const res = await request.get<MkResponse<AddressItem>>(`member/address/${route.params.id}`)
    AdressInfo.value = res.data.result
    closeToast()
  } else {
    document.title = '添加地址'
    AdressInfo.value.isDefault = 1
  }
})
//控制显示省市区弹层
const showAreaPop = ref(false)
//点击省市区弹层确认按钮
const onAreaConfirm = ({ selectedOptions }) => {
  if (!areaList.value) return
  console.log(selectedOptions)
  const arr = selectedOptions.map((v) => {
    return v.text
  })
  const arrNum = selectedOptions.map((v) => {
    return v.value
  })
  // console.log(arrNum)
  AdressInfo.value.cityCode = arrNum[0]
  AdressInfo.value.countyCode = arrNum[1]
  AdressInfo.value.provinceCode = arrNum[2]
  AdressInfo.value.fullLocation = arr.join(' ')
  //关闭弹框
  showAreaPop.value = false
}
// 3. 设为默认地址
const isDefault = computed({
  set(value) {
    if (AdressInfo.value) {
      // console.log('源地址', AdressInfo.value.isDefault)
      // console.log(value)
      AdressInfo.value.isDefault = value ? 0 : 1
    }
  },
  get() {
    // console.log(AdressInfo.value.isDefault)
    // console.log('adress', AdressInfo.value?.isDefault === 0)
    return AdressInfo.value?.isDefault === 0
  },
})
// const isDefault = computed(() => {
//   console.log(AdressInfo.value.isDefault)
//   console.log('adress', AdressInfo.value?.isDefault === 0)
//   return AdressInfo.value?.isDefault === 0
// })
// 4. 提交

const onSubmit = async () => {
  console.log(AdressInfo.value)
  if (!AdressInfo.value.receiver) {
    return showToast('请输入收货人')
  }
  if (!AdressInfo.value.contact) {
    return showToast('请输入手机号码')
  }
  if (!/^1[1-9]\d{9}$/.test(AdressInfo.value.contact)) {
    return showToast('手机号码格式不对')
  }
  if (!AdressInfo.value.provinceCode) {
    return showToast('请选择所在区')
  }
  if (!AdressInfo.value.address) {
    return showToast('请输入详细地址')
  }
  try {
    loading.value = true
    if (route.params.id) {
      await request.put(`member/address/${AdressInfo.value.id}`, AdressInfo.value)
    } else {
      await request.post('member/address', AdressInfo.value)
    }
    loading.value = false
    showToast('保存成功')
    router.back()
  } catch (e) {
    showToast('保存失败')
    loading.value = false
  }
}
</script>

<template>
  <div class="address-edit-page">
    <van-popup v-model:show="showAreaPop" position="bottom">
      <van-area
        title="请选择地址"
        :area-list="areaList"
        @confirm="onAreaConfirm"
        @cancel="showAreaPop = false"
      />
    </van-popup>
    <van-cell-group>
      <van-field
        v-model="AdressInfo.receiver"
        label="收货人"
        placeholder="请输入收货人"
      ></van-field>
      <van-field
        v-model="AdressInfo.contact"
        label="手机号码"
        placeholder="请输入手机号码"
      ></van-field>
      <van-field
        @click="showAreaPop = true"
        label="所在地区"
        v-model="AdressInfo.fullLocation"
        placeholder="请输入所在地区"
        readonly
      ></van-field>
      <van-field
        v-model="AdressInfo.address"
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
      >
      </van-field>
      <van-field label="设为默认地址" readonly>
        <template #extra>
          <van-checkbox
            v-model="isDefault"
            :icon-size="20"
            checked-color="var(--mk-red)"
          ></van-checkbox>
        </template>
      </van-field>
    </van-cell-group>
    <div class="submit">
      <van-button @click="onSubmit" round block type="primary"> 保存 </van-button>
    </div>
  </div>
</template>

<style lang="css" scoped>
.address-edit-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  height: 80px;
}

.geo {
  width: 250px;
  height: 250px;
  overflow-y: auto;
}

.geo-title {
  font-size: 14px;
  color: var(--mk-gray);
  padding: 8px;
}

.geo-item {
  border-top: 0.5px solid var(--mk-under);
  padding: 8px;
}

.geo-item-label {
  font-size: 14px;
  color: var(--mk-red);
}

.geo-item-value {
  font-size: 12px;
  color: var(--mk-gray);
}
</style>
